<template>
  <ul class="top-nav">
    <li>
      <router-link exact to="/">首页</router-link>
    </li>
    <li>
      <router-link to="/file-view">文件浏览</router-link>
    </li>
<!--    <li>-->
<!--      <router-link to="/artists-index">歌手</router-link>-->
<!--    </li>-->
<!--    <li>-->
<!--      <router-link to="/top-index">榜单</router-link>-->
<!--    </li>-->
<!--    <li>-->
<!--      <router-link to="/mine-index">我的</router-link>-->
<!--    </li>-->
<!--    <li>-->
<!--      <router-link to="/search-index">搜索</router-link>-->
<!--    </li>-->
  </ul>
</template>

<script>
    export default {
      name: "TopNav"
    }
</script>

<style scoped lang='less'>
  .top-nav {
    display: flex;
    background: #fff;
    li {
      flex: 1;
      text-align: center;
      padding-top: 10px;
      a {
        display: block;
        padding-bottom: 8px;
      }
      .active {
        border-bottom: 2px solid #ff0000;
      }
    }
  }
</style>
